<template>
  <div>
    <h2>自定义指令</h2>
    <!--
        全局自定义指令
            Vue.directive('指令名',{
               指令的生命周期：
                  bind:类似beforeMount
                  inserted:类似mounted
                  update:
                  componentUpdated：类似于updated
                  unbind:类似destroyed
                  bind(dom,obj,vnode){
                    dom:指令所在dom
                    obj:{
                      指令的属性
                      指令的修饰符
                      指令的值(value)
                    }
                    vnode:指令所在dom的虚拟dom节点信息
                       {
                        context:指令所在组件的this
                       }
                  }
            })
           使用：v-指令名:属性名.修饰符=值
                 v-on:keyup.enter='fn'

        局部自定义指令
           directives:{
              指令名:{
                指令生命周期
              }
           }

    -->

    <input v-focus="num" type="text">
    <button @click="num++">修改num</button>
    <img ref="img" src="http://q6cu3t6jv.bkt.clouddn.com/1063705989926227968?t=1616204161907" alt="">
    <img v-errorimg="icon" alt="">
    <img v-errorimg alt="">

  </div>
</template>
<script>
import icon from '@/assets/common/img.jpeg'
export default {
  directives: {
    focus: {
      inserted(dom, obj, vnode) {
        console.log(dom, obj, vnode)
        console.log(vnode.context.msg)
        dom.focus()
        dom.value = obj.value
      },
      componentUpdated(dom, obj) {
        dom.value = obj.value
      }
    }
  },
  data() {
    return {
      msg: 'hello',
      num: 123,
      icon
    }
  },
  mounted() {
    this.$refs.img.onerror = () => {
      console.log('图片加载出错了')
      this.$refs.img.src = require('@/assets/common/head.jpg')
    }
  }

}
</script>
<style>
</style>
